import React, {useState} from "react";
import { BrowserRouter, Link, Route, Switch, Redirect } from "react-router-dom";
import { connect } from "react-redux";
import { login } from "../store/user.redux";

function Home() {
  return (
    <div>
      <h3>课程列表</h3>
      <ul>
        <li>
          <Link to="/detail/web">Web架构师</Link>
        </li>
        <li>
          <Link to="/detail/python">Python架构师</Link>
        </li>
      </ul>
    </div>
  );
}
//当前用户信息
function About() {
  return (
    <div>
      <h3>个人中心</h3>
      <div>
        <Link to="/about/me">个人信息</Link>
        <Link to="/about/order">订单查询</Link>
      </div>
      <Switch>
        <Route path="/about/me" component={() => <div>Me</div>} />
        <Route path="/about/order" component={() => <div>Order</div>} />
        <Redirect to="/about/me"></Redirect>
      </Switch>
    </div>
  );
}
function NoMatch({ location }) {
  return <div>404,{location.pathname}不存在</div>;
}
//传递进来的路由器对象
function Detail(props) {
  //1.history:导航指令 history.back()
  //2.match:获取参数信息
  //3.location:当前的url信息
  console.log(props);
  return (
    <div>
      当前课程是:{props.match.params.course}
      <button onClick={props.history.goBack}>后退</button>
    </div>
  );
}

//路由守卫
//希望的用法 :<PrivateRoute path="/about" ...>
const PrivateRoute = connect(state => ({ isLogin: state.user.isLogin }))(
  ({ component: Comp, isLogin, ...rest }) => {
    //做认证
    //render:动态渲染组件
    return (
      <Route
        {...rest}
        render={props =>
          isLogin ? (
            <Comp />
          ) : (
            <Redirect
              to={{
                pathname: "/login",
                state: { redirect: props.location.pathname }
              }}
            ></Redirect>
          )
        }
      ></Route>
    );
  }
);

// 登录组件
const Login = connect(
  state => ({
    isLogin: state.user.isLogin,
    loading: state.user.loading,
    error: state.user.error // 登录错误信息
  }),
  {
    login
  }
)(function({ location, isLogin, login, loading, error }) {
  const redirect = location.state.redirect || "/";
  const [uname, setUname] = useState(""); // 用户名输入状态
  if (isLogin) {
    return <Redirect to={redirect}></Redirect>;
  }

  return (
    <div>
      <p>用户登录</p>
      <hr />
      {/* 登录错误信息展示 */}
      {error && <p>{error}</p>}
      {/* 输入用户名 */}
      <input
        type="text"
        onChange={e => setUname(e.target.value)}
        value={uname}
      />
      <button onClick={() => login(uname)} disabled={loading}>{loading? "登录中":"登录"}</button>
    </div>
  );
});

export default function RouterSample() {
  return (
    <div>
      <BrowserRouter>
        <div>
          {/**导航链接 */}
          <ul>
            <li>
              <Link to="/">首页</Link>
            </li>
            <li>
              <Link to="/about">关于</Link>
            </li>
          </ul>
          {/**路由配置：路由即组件 */}
          <Switch>
            <Route exact path="/" component={Home}></Route>
            <PrivateRoute path="/about" component={About}></PrivateRoute>
            <Route path="/login" component={Login}></Route>
            <Route path="/detail/:course" component={Detail}></Route>
            {/**404：没有path */}
            <Route component={NoMatch}></Route>
          </Switch>
        </div>
      </BrowserRouter>
    </div>
  );
}
